
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
	<title>360安全锦囊</title>
	<style type="text/css">
		body {
			background: url(images/bg.jpg);
			padding: 0;
			font-size: 24px;
		}
		#customer_info_wrap {
			position: relative;
		}
		#customer_info_wrap input,#customer_info_wrap label {
			position: absolute;
			line-height: 32px;
			height: 32px;
			font-size: 24px;
			background: none;
			border: none;
		}
		#customer_info_wrap .customer-name {
			left: 221px;
			top: 100px;
			width: 280px;
		}
		#customer_info_wrap .customer-phone {
			left: 95px;
			top: 195px;
			width: 410px;
		}
		#customer_info_wrap .customer-address {
			left: 95px;
			top: 280px;
			width: 410px;
		}
		#customer_info_wrap .customer-weixin {
			left: 265px;
			top: 332px;
			width: 256px;
		}
		#customer_info_wrap .customer-company-name {
			left: 255px;
			top: 400px;
			width: 256px;
		}
		#customer_info_wrap .customer-company-address {
			left: 255px;
			top: 452px;
			width: 256px;
		}
		#customer_info_wrap .input-submit {
			left: 43px;
			top: 905px;
			line-height: 80px;
			width: 130px;
			height: 80px;
			opacity: 0;
		}
		#customer_info_wrap .pp-info-wrap {
			width: 200px;
			height: 235px;
			overflow: hidden;
			left: 75px;
			top: 650px;
		}
		#customer_info_wrap .pp-visa-wrap {
			width: 202px;
			height: 235px;
			overflow: hidden;
			left: 344px;
			top: 650px;
		}

		#customer_info_wrap label img {
			position: absolute;
		}
		#customer_info_wrap label input {
			opacity: 0;
			font-size: 200px;
		}
	</style>
</head>
<body>
<div id="customer_info_wrap">
	<form id="js_form_customer" action="/api_360_recieve/submitInfo" method="post" onsubmit="submitCustomerForm(this);return false;">
		<img src="images/customer-info.png"/>
		<input type="hidden" id="js_gift_type" name="gift_type" value="2">
		<input type="text" name="customer_name" class="customer-name" data-validate="required" data-errmsg="请输入姓名"/>
		<input type="tel" name="customer_phone" class="customer-phone" data-validate="phone" data-errmsg="请输入正确的国内联系电话"/>
		<input type="text" name="customer_address" class="customer-address" data-validate="required" data-errmsg="请输入国内快递接受地址"/>
		<input type="text" name="customer_weixin" class="customer-weixin" />
		<input type="text" name="customer_company_name" class="customer-company-name" />
		<input type="text" name="customer_company_address" class="customer-company-address" />
		<label class="pp-info-wrap">
			<input type="file" onchange="onFileInputChange(this)" accept="image/*" data-inputid="js_input_pp_1" data-imgid="js_img_pp_1"/>
			<img src="images/pp-wrap-default-1.png"/>
			<img src="" id="js_img_pp_1"/>
			<img src="images/pp-wrap-1.png"/>
		</label>
		<label class="pp-visa-wrap">
			<input type="file" onchange="onFileInputChange(this)"  accept="image/*" data-inputid="js_input_pp_2" data-imgid="js_img_pp_2"/>
			<img src="images/pp-wrap-default-2.png"/>
			<img src="" id="js_img_pp_2"/>
			<img src="images/pp-wrap-2.png"/>
		</label>
		<input type="hidden" id="js_input_pp_1" name="customer_passport_picture_info_path" data-validate="required" data-errmsg="请上传护照主页信息照片"/>
		<input type="hidden" id="js_input_pp_2" name="customer_passport_picture_visa_path" data-validate="required" data-errmsg="请上传护照签注页信息照片"/>
		<input type="submit" class="input-submit" value=""/>
	</form>
	<script type="text/javascript" src="canvasResize.all.js"></script>
	<script type="text/javascript">
		function onFileInputChange(el) {
			if(el.files.length == 0) return;
			canvasResize(el.files[0], {
		        width: 202,
		        height: 237,
		        crop: true,
		        quality: 80,
		        callback: function(data, width, height) {
		        	console.log(arguments);
		        	console.log(el.dataset)
		        	var inputid = el.dataset['inputid'];
		        	var imgid = el.dataset['imgid'];
		            document.getElementById(inputid).value = data;
		            document.getElementById(imgid).src = data;
		            el.value = "";
		        }
		    });
		}

		function submitCustomerForm(frm) {
			ajax({
				form: frm.id,
				success: function(res) {
					alert(res.detail);
					frm.reset();
					document.getElementById('js_input_pp_1').value = '';
					document.getElementById('js_input_pp_2').value = '';
		            document.getElementById('js_img_pp_1').src = '';
		            document.getElementById('js_img_pp_2').src = '';
				}
			});
		}

		function ajax(config) {
			var params = config.params || [],req;
			if(typeof params === 'object') {
				var p = [];
				for(var k in params) {
					p.push(encodeURIComponent(k)+'='+encodeURIComponent(params[k]));
				}
				params = p;
			}
			var url = config.url || '';
			
			if(config.form) {
				var frm = typeof(config.form) == 'string' ? document.getElementById(config.form) : config.form;
				url = url || frm.action;
				for(var i=0,len = frm.elements.length; i < len; i++) {
					el = frm.elements[i];
					if(el.tagName.toUpperCase() == 'SELECT') {
						var v = el.options[el.selectedIndex].value;
						if(el.name) {
							params.push(encodeURIComponent(el.name) +'='+ encodeURIComponent(v));
						}
					} else if(el.name && ((el.type !='radio'&&el.type != 'checkbox') || el.checked)) {
						if(el.dataset['validate']) {
							if(!checkValidate(el.value,el.dataset['validate'])) {
								alert(el.dataset['errmsg']);
								return;
							}
						}
						params.push(encodeURIComponent(el.name) +'='+ encodeURIComponent(el.value));
					}
				}
			}

			function checkValidate(val,reg) {
				var validateRegex = {
		            'required' : /^.+$/,
		            'phone' : /^1\d{10}$/,
		            'smscode': /^\d{6}$/,
		            'zipcode': /^\d{6}$/,
		        }
		        var regex = validateRegex[reg];
		        if(!regex) {
		            regex = new RegExp(reg);
		        }
		        return regex.test(val);
			}

			if(url.indexOf('?')>-1){ url += '&timestamp='+new Date().valueOf(); }else{ url += '?timestamp='+new Date().valueOf(); }


			function sendRequest(url,postData,config) {
				req = createXMLHTTPObject();
				if (!req) return;
				var method = (postData) ? "POST" : "GET";
				req.open(method,url,true);
				req.setRequestHeader('User-Agent','XMLHTTP/1.0');
				if (postData)
					req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
				req.onreadystatechange = function () {
					if (req.readyState != 4) return;
					if (req.status != 200 && req.status != 304) {
						return;
					}
					(typeof(config.mask) != 'undefined') && config.mask.zmunmask && config.mask.zmunmask();
					var res = eval('('+req.responseText+')');
					if(config.callback) {
						config.callback(res);
					}
					if(res.success) {
						config.success && config.success(res);
					} else {
						(config.failure || function(res) {alert(res.detail);})(res);
					}
				};
				if (req.readyState == 4) return;
				req.send(postData);
			}

			var XMLHttpFactories = [
				function () {return new XMLHttpRequest()},
				function () {return new ActiveXObject("Msxml2.XMLHTTP")},
				function () {return new ActiveXObject("Msxml3.XMLHTTP")},
				function () {return new ActiveXObject("Microsoft.XMLHTTP")}
			];

			function createXMLHTTPObject() {
				var xmlhttp = false;
				for (var i=0;i<XMLHttpFactories.length;i++) {
					try {
						xmlhttp = XMLHttpFactories[i]();
					}
					catch (e) {
						continue;
					}
					break;
				}
				return xmlhttp;
			}
			sendRequest(url,params.join('&'),config);
			return req;
		}
	</script>
</div>
</body>
</html>